<template>
	<div class="panel pie2">
		<h2>订单率</h2>
		<div class="chart"></div>
		<div class="panel-footer"></div>
	</div>
</template>

<script>
export default{
	mounted(){
		this.home6()
	},
	methods:{
		home6(){
			var myChart6=this.$echarts.init(document.querySelector('.pie2 .chart'));
			var num1 = 75;
			var num2 = 80;
			var num3 = 55;
			var option6 = {
				title: [ {
					text: '本月订单:16%',
					left: '18.5%',
					top: '40%',
					textAlign: 'center',
					textStyle: {
						fontSize: '0.2rem',
						fontWeight: '100',
						color: '#fff',
						textAlign: 'center',
					},
				}, {
					text: '退货:7%',
					left: '79.5%',
					top: '40%',
					textAlign: 'center',
					textStyle: {
						fontSize: '0.2rem',
						fontWeight: '100',
						color: '#fff',
						textAlign: 'center',
					},
				} ],
				series: [{
						type: 'pie',
						startAngle: 0,
						radius: ['71%', '73%'],
						center: ['20%', '50%'],
						data: [{
								hoverOffset: 1,
								value: num1,
								name: '',
								itemStyle: {
									normal: {
										color: new this.$echarts.graphic.LinearGradient(0, 1, 1, 0, [{
											offset: 0,
											color: '#ef29b1'
										}, {
											offset: 1,
											color: '#fd7225'
										}]),
										shadowColor: '#1c1b3a',
										shadowBlur: 1,
										shadowOffsetX: '0',
										shadowOffsetY: '25',
									}
								},
								label: {
									show: false
								},
								labelLine: {
									normal: {
										smooth: true,
										lineStyle: {
											width: 0
										}
									}
								},
								hoverAnimation: false,
							},
							{
								label: {
									show: false
								},
								labelLine: {
									normal: {
										smooth: true,
										lineStyle: {
											width: 0
										}
									}
								},
								value: 100 - num1,
								hoverAnimation: false,
								itemStyle: {
									color: 'rgba(251, 200, 79, 0)',
								},
							}
						]
					},

					{
						type: 'pie',
						startAngle: 20,
						radius: ['71%', '73%'],
						center: ['80%', '50%'],
						data: [{
								hoverOffset: 1,
								value: num2,
								name: '',
								itemStyle: {
									normal: {
										color: new this.$echarts.graphic.LinearGradient(0, 1, 1, 0, [{
											offset: 0,
											color: '#ef29b1'
										}, {
											offset: 1,
											color: '#fd7225'
										}]),
										shadowColor: '#1c1b3a',
										shadowBlur: 1,
										shadowOffsetX: '0',
										shadowOffsetY: '25',
									}
								},
								label: {
									show: false
								},
								labelLine: {
									normal: {
										smooth: true,
										lineStyle: {
											width: 0
										}
									}
								},
								hoverAnimation: false,
							},
							{
								label: {
									show: false
								},
								labelLine: {
									normal: {
										smooth: true,
										lineStyle: {
											width: 0
										}
									}
								},
								value: 100 - num2,
								hoverAnimation: false,
								itemStyle: {
									color: 'rgba(232, 85, 63, 0)',
								},
							}
						]
					},
				]
			};
			myChart6.setOption(option6)
			window.addEventListener('resize',function(){
				myChart6.resize()
			})
		}
	}
}
</script>

<style>
</style>
